<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@page import="org.springframework.ui.Model"%>
<%@page import="com.boxin.ims.modules.wechat.entity.WechatMember"%>
<%@page import="com.zhixun.mobile.modules.member.web.IndexController"%>
<%@page import="com.zhixun.mobile.sys.utils.SessionMemberUtils"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10" />

<html>
	<head>
	<title>刮刮卡</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="decorator" content="default" />
<meta name="viewport"
	content="width=device-width initial-scale=1.0  maximum-scale=1.0">
<link href="${ctxStatic}/jquery-mobile/css/jquery.mobile-1.3.1.min.css"
	type="text/css" rel="stylesheet" />
<link href="${ctxStatic}/member/themes/ShiShangHong/style11.css"
	type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/member/themes/default/jquery-1.9.1.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/member/themes/default/default.css" type="text/css" rel="stylesheet" />



<link href="${ctxStatic}/member/themes/default/activity-style.css" rel="stylesheet" type="text/css">
		<script src="${ctxStatic}/member/themes/default/jquery.js" type="text/javascript"></script>
		<script src="${ctxStatic}/member/themes/default/wScratchPad.js" type="text/javascript"></script>
		<script src="${ctxStatic}/member/themes/default/alert.js" type="text/javascript"></script>
		<link href="${ctxStatic}/bootstrap/2.3.1/css_${not empty ctxTheme?ctxTheme:'default'}/bootstrap.min.css" type="text/css" rel="stylesheet" />


<style type="text/css">
		#footer {background-color:#e3e3e5;border-top:1px solid #b5b5b5;height:50px;text-align:center;margin-bottom: 1px;position:absolute; width: 100%; top:expression(document.body.clientHeight-this.style.pixelHeight+document.body.scrollTop)}
#footer p {margin-top:10px;color:#555;font-size:12px;text-shadow:1px 1px 0 #fff;font-family:'Microsoft Yahei';}
#footer p a {font-size:14px;color:#555;text-shadow:none;}
#footer p img.unicom{vertical-align:middle;margin-right:5px;}
#footer .icon{ margin-right: 5px;vertical-align: -3px;}
#min_nav .min_nav_left_text,#min_nav .min_nav_right_text{height:21px;line-height:21px;font-size:12px;color:#fffefe}
#min_nav .min_nav_left_text{float:left;display:inline;}
#min_nav .min_nav_right_text{float:right;display:inline;}
#min_nav .min_nav_right_text span,#min_nav .min_nav_right_text a{color:#ffcc00}
#min_nav .min_nav_right_text a:visited{color:#ffcc01}
#min_nav .min_nav_right_text span.orangeTxt,#min_nav .min_nav_right_text a.orangeTxt{color:#f60}
#min_nav .min_nav_right_text a.fw{color:#fff}		
		
		</style>



<%

	String userId = request.getParameter("uid");
	WechatMember member =	SessionMemberUtils.getSessionMemberByUserId(request,userId);
	
%>

<div class="topbar clearfix">
					<div class="topbarbg"></div>
					<div id="min_nav">
						
						<div class="min_nav_right_text">
					
							<!--login -->
						<div class="min_nav_right_text">
							<% if(member == null){%> <a href="${ctx}/member/tologin?uid=${uid}&wechatId=${wechatId}&style=${style}&topage=${topage}">登录</a><%}else{ %>
							欢迎您  <%=member.getName() %> | <a href="${ctx }/member/toIndex?uid=${uid}&wechatId=${wechatId}&style=${style}&topage=${topage}">主页</a>| <a href="${ctx }/member/logout?uid=${uid}&wechatId=${wechatId}&style=${style}&topage=${topage}">退出</a>
							<%} %>
						</div>
						
						
					</div>
					         <!--   <h3 style="text-align:center">${membertitle }</h3> -->
				</div>
				</div>


		
	<style type="text/css">


.content {
	margin:0px 0 15px 0;
}

.box {
	border-radius: 5px;
	font-size:14px;
	border: 1px dashed rgba(0, 0, 0, 0.3);
}
.box .Detail {
	padding: 15px;
}
.boxcontent {
	margin:15px 15px 0;
	border-radius: 5px;
	padding: 2px;
	background-color: #FEF8B2;
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
.boxwhite{
	background-color: #ffffff;
}





</style>		
	<script type="text/javascript">
		function loading(canvas, options) {
			this.canvas = canvas;
			if (options) {
				this.radius = options.radius || 12;
				this.circleLineWidth = options.circleLineWidth || 4;
				this.circleColor = options.circleColor || 'lightgray';
				this.moveArcColor = options.moveArcColor || 'gray';
			} else {
				this.radius = 12;
				this.circelLineWidth = 4;
				this.circleColor = 'lightgray';
				this.moveArcColor = 'gray';
			}
		}
		loading.prototype = {
			show: function() {
				var canvas = this.canvas;
				if (!canvas.getContext) return;
				if (canvas.__loading) return;
				canvas.__loading = this;
				var ctx = canvas.getContext('2d');
				var radius = this.radius;
				var me = this;
				var rotatorAngle = Math.PI * 1.5;
				var step = Math.PI / 6;
				canvas.loadingInterval = setInterval(function() {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					var lineWidth = me.circleLineWidth;
					var center = {
						x: canvas.width / 2,
						y: canvas.height / 2
					};

					ctx.beginPath();
					ctx.lineWidth = lineWidth;
					ctx.strokeStyle = me.circleColor;
					ctx.arc(center.x, center.y + 20, radius, 0, Math.PI * 2);
					ctx.closePath();
					ctx.stroke();
					//在圆圈上面画小圆   
					ctx.beginPath();
					ctx.strokeStyle = me.moveArcColor;
					ctx.arc(center.x, center.y + 20, radius, rotatorAngle, rotatorAngle + Math.PI * .45);
					ctx.stroke();
					rotatorAngle += step;

				},
				100);
			},
			hide: function() {
				var canvas = this.canvas;
				canvas.__loading = false;
				if (canvas.loadingInterval) {
					window.clearInterval(canvas.loadingInterval);
				}
				var ctx = canvas.getContext('2d');
				if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
			}
		
		
		}
		
		
		function doLottery(){
			$("#scratchpad")[0].innerHTML="";

			$.post("doLottery",{uid:${uid}},function(data){
								document.getElementById('prize').innerHTML = data.lotteryName;
								document.getElementById('detail').innerHTML = data.message+str;
								document.getElementById('mycount').innerHTML = data.mycount;
								
							});
							
			$("#zjl").slideToggle(500);
		}
			
			
				
			
		
	</script>


</head>
	<body data-role="page" class="activity-scratch-card-winning">
		
		<div class="main">
			<div class="cover">
				<img src="${ctxStatic}/member/themes/default/images/activity-scratch-card-bannerbg.png">
				<div id="prize">
				</div>
				<div id="scratchpad">
				</div>
			</div>
			<div align="center">
			<input id="btn_1" class="btn btn-danger" type="button" style="height:auto;" onclick="doLottery();disabled=true;"	value="点我抽奖" />
			</div>						
			<div class="content">
				<div id="zjl" style="display:none" class="boxcontent boxwhite">
					<div class="box">
						
						<div id="detail" class="Detail">
							<p>
								
							</p>
							
							
							
						</div>
					</div>
				</div>
				
				
			</div>
					<div class="boxcontent boxwhite">
					<div class="box">
						<div class="title-brown">
							活动说明：
						</div>
						<div class="Detail">
							<p class="red">
								本次活动您可以刮 ${count }次,你已经刮了
								<span id="mycount">
								${mycount }
								
								</span>
								次.
							</p>
							<p>
								
							</p>
						</div>
					</div>
				</div>
				
				
			
				<div class="boxcontent boxwhite">
					<div class="box">
						<div class="title-brown">
							<span>
								奖项设置：
							</span>
						</div>
						<div class="Detail">
							<table>
						
						
						<c:forEach items="${ lotteryList }" var="lottery" varStatus="i">
						
							
							<tr>
							
							<td>
							奖品 ${i.count}:
							</td>
							
							<td>
							${ lottery.name }
							
							</td>
							</tr>
							
						
						
						</c:forEach>
						
						</table>
						</div>
					</div>
				</div>
			
			</div>
		
			<div style="clear:both;">
			</div>
		<div>
		<c:if test="${uid ne '34' }">
		<div style="height:20px">
		
		
		</div>
		<jsp:include page="/static/member/themes/default/footer.jsp">
			<jsp:param value="${uid }" name="uid" />
		</jsp:include>
	</c:if>
	</div>》
		<script type="text/javascript">
			window.sncode = "null";
			window.prize = "谢谢参与";
			
			var str = "<br/><a href='${ctx}/member/guaguaka?uid=${uid}&wechatId=${wechatId}&style=${style}'>再试一次</a>";

			var zjl = false;
			var num = 0;
			var goon = true;
			$(function() {
				$("#scratchpad").wScratchPad({
					width: 150,
					height: 40,
					color: "#a9a9a7",
					scratchMove: function(e, percent) {
						
						num++;
						
						if(num == 2){
							$("#btn_1").attr('disabled',true);;
							

							$.post("doLottery",{uid:${uid}},function(data){
												document.getElementById('prize').innerHTML = data.lotteryName;
												document.getElementById('detail').innerHTML = data.message+str;
												document.getElementById('mycount').innerHTML = data.mycount;
											});
											
											$("#zjl").slideToggle(500);
						}
						
						if(percent > 1){
							this.clear();
						}
			                
						
						
				
						

						
					}
				});

			
			});

			
		</script>
		
	</body>

</html>